<template>
  <div class="choose">
    <el-card class="box-card">
      <div class="chose-time">
        <span>选择时间</span>
        <div class="block">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="picker"
          >
            <template v-slot:range-separator>
              <i class="iconfont icon-daoda"></i>
            </template>
          </el-date-picker>
        </div>
      </div>
      <div class="select-quick">
        <span>快速选择</span>
        <div class="select-btn">
          <button
            v-for="(item, index) in selectQuickBtn"
            :key="item.id"
            class="btn"
            :class="selectQuickActive == index ? 'active' : ''"
            @click="active(index)"
          >
            {{ item.title }}
          </button>
        </div>
      </div>
      <div class="data-type">
        <span>数据类型</span>
        <div>
          <el-radio v-model="liveType" label="1">
            <span>站点</span>
          </el-radio>
          <el-radio v-model="liveType" label="2">
            <span>融合网格</span>
          </el-radio>
        </div>
      </div>
      <div class="show-map">
        <span>地图展示</span>
        <div>
          <el-radio v-model="mapShowOfType" label="1">
            <span>数值</span>
          </el-radio>
          <el-radio v-model="mapShowOfType" label="2">
            <span>填色</span>
          </el-radio>
        </div>
      </div>
      <div class="select">
        <div class="city">
          <span>所属市</span>
          <el-select v-model="city" placeholder="请选择" class="custom-select">
            <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </div>
        <div class="county">
          <span>所属县</span>
          <el-select
            v-model="county"
            placeholder="请选择"
            style="width: 8rem"
            class="custom-select"
          >
            <el-option
              v-for="item in countyOptions"
              :key="item.value"
              :label="item.label"
              :value="item.label"
              class="custom-select"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="query">
        <el-button type="primary" @click="query">查询</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import { getCity, getFactsInfo ,getFactsGrid} from "@/api/zhjcright";
import { mapMutations } from "vuex";
import cityData from '/src/assets/city.json'
import moment from "moment";
export default {
  name: "Choose",
  components: {
    // ChooseTiltle,
  },
  data() {
    return {
      time: [new Date(2024, 8, 1, 0, 0), new Date()],
      FactsInfo:null,
      FactsGrid:null,
      // time:  [new Date(2000, 10, 10, 10, 10), new Date(2024, 10, 11, 10, 10)],
      selectQuickBtn: [
        {
          id: uuidv4(),
          title: "1h",
        },
        {
          id: uuidv4(),
          title: "3h",
        },
        {
          id: uuidv4(),
          title: "6h",
        },
        {
          id: uuidv4(),
          title: "24h",
        },
        {
          id: uuidv4(),
          title: "48h",
        },
      ],
      province: null,
      selectQuickActive: 0,
      liveType: "1",
      mapShowOfType: "1",
      city: "全部",
      county: '全部',
      cityOptions: [],
    };
  },
  computed: {
    countyOptions() {
      if (this.city == '全部') {
        return [];
      }
      // const child = this.cityOptions.find((item) => item.name == this.city).child;
      // child.unshift({id:uuidv4(),level:2,name:"全部"});
      // return child;
      const children = this.cityOptions.find((item) => item.label == this.city).children;
      const allIndex = children.findIndex(item=>item.label == '全部');
      if(allIndex != -1){
        children.splice(allIndex,1);
      }
      children.unshift({value:"全部",label:"全部"});
      return children;
    },
  },
  mounted() {
    // getCity({})
    //   .then((res) => {
    //     console.log(res);
    //     const province = res.data[0];
    //     province.child.unshift({id:uuidv4(),level:2,name:"全部"})
    //     this.cityOptions = province.child;
    //   })
    //   .catch((err) => console.log(err));
    this.province = cityData.data.find(item=>item.value == "650000");
    const allIndex = this.province.children.findIndex(item=>item.label == '全部');
      if(allIndex != -1){
        this.province.children.splice(allIndex,1);
      }
    this.province.children.unshift({value:"全部",label:"全部"});
    this.cityOptions = this.province.children;
  },
  methods: {
    ...mapMutations(["updateFacstGrid","updateFacstGridPicture"]),
    active(index) {
      this.selectQuickActive = index;
    },

    //实况查询大方法
    async query() {
      let beginTime;
      let endTime;
      //通过时间控件进行选择
      if (this.time) {
        beginTime = moment(this.time[0]).format("YYYY-MM-DD HH:mm:ss");
        endTime = moment(this.time[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      //通过快捷选择方式选择
      else {
        endTime = moment().format("YYYY-MM-DD HH:mm:ss");
        const hour = parseInt(
          this.selectQuickBtn[this.selectQuickActive].title.split("")[0]
        );
        beginTime = moment(
          new Date(new Date(endTime) - hour * 60 * 60 * 1000)
        ).format("YYYY-MM-DD HH:mm:ss");
      }

      const optionsPicture={
        beginTime:moment(new Date(2000, 10, 10, 10, 10)).format("YYYY-MM-DD HH:mm:ss"),
        endTime:moment(new Date(2024, 10, 11, 10, 10)).format("YYYY-MM-DD HH:mm:ss"),
        timechar:20,
        ntimes:'012',
        type:'ER03',
      };
      const options = {
        beginTime: beginTime,
        endTime: endTime,
        liveType: this.liveType,
      };
      if(this.city != "全部"){
        options.city = this.city;
      }
      if(this.county != '全部'){
        options.county = this.county;
      }
      console.log(options);
      if(this.liveType == "1"){
        let res;
        if(this.mapShowOfType == '1'){
          res = await getFactsInfo(options);
        }
        // const facts=
        // if (!facts.data.length) {
        //   return;
        // }
        this.$emit("handFacts",this.mapShowOfType,res.data);
        return;
      }else {
        getFactsInfo(options).then((res) => {
          console.log(res);
          this.FactsInfo=res.data[0].rltmap;
          ;
          console.log(this.FactsInfo, "ressssssssssssssssssssssssss");
          if(this.liveType=="2"&&this.mapShowOfType=="1"){
            this.updateFacstGrid(this.FactsInfo);
          }
        });
        // if(this.liveType=="2"&&this.mapShowOfType=="1"){
        //   this.updateFacstGrid(this.FactsInfo);
        // }

        // this.FactsGrid = await getFactsGrid(optionsPicture);

        getFactsGrid(optionsPicture).then((res) => {
          console.log(res.data, "resssssssssssssssss111111111sssssssss");
          this.FactsGrid=res.data[0].gridDataPicAndXY.pictureUrl;
          if(this.liveType=="2"&&this.mapShowOfType=="2"){
            this.updateFacstGridPicture(this.FactsGrid);
          }
        });
        // if(this.liveType=="2"&&this.mapShowOfType=="2"){
        //   this.updateFacstGridPicture(this.FactsGrid);
        //
        // }
      }

      // console.log(this.factsGrid, "factsGrid222222222222222222222");

    },
  },
};
</script>

<style lang="scss" scoped>

.choose {
  background-color: rgba(13, 40, 53, 0.4);
  z-index: 10;
  .box-card {
    width: 100%;
    height: 11rem;
    overflow:auto;
    background-color: rgba(13, 40, 53, 0.4);
    border: none;
    .chose-time {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 1rem;
      width: 100%;
      gap: 0px;
      span {
        color: white;
        font-size: 15px;
        width: 25%;
      }
      .block {
        .picker {
          width: 100%;
          border: none;
          height: 35px;
          background-color: #3c6485;
          ::v-deep .el-range-input {
            border: none;
            background-color: #3c6485;
            color: white;
          }
        }
      }
    }
    .select-quick {
      margin-top: 0.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      span {
        color: white;
        font-size: 15px;
        width: 25%;
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        outline: none;
        border: none;
        border-radius: 5px;
        width: 3.6rem;
        // width: px;
        height: 2rem;
        color: white;
        font-weight: bold;
        // font-size: 16px;
        background-color: #3c6485;
        &:hover {
          cursor: pointer;
        }
      }
      .select-btn {
        width: 85%;
        display: flex;
        gap: 0.1rem;
      }
    }

    //数据类型
    .data-type,
    .show-map {
      display: flex;
      margin-top: 0.5rem;
      //   gap: 1rem;
      span {
        color: white;
        font-size: 15px;
        width: 25%;
      }
    }
    .select {
      margin-top: 0.5rem;
      display: flex;
      justify-content: space-between;
      // gap: 0.5rem;
      .city,
      .county {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        span {
          color: white;
        }

        .custom-select ::v-deep .el-input__inner {
          // color: #fff !important;
          height: 30px;
          width: 7.5rem;
          border: 1px solid #3c6485;
          background: #3c6485 !important;
          color: white;
        }
      }
    }
    .query {
      display: flex;
      justify-content: center;
      margin-top: 1rem;
    }
  }
}
.icon-daoda {
  color: #8eb4cc;
}
.box-card .select-btn .btn.active {
  background-color: #2394ff;
}
::-webkit-scrollbar {
  display: none;
}
</style>
